// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好

// import { test } from 'shelljs'

const staticOption = {
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      let res = ''
      if (!params.value) {
        return ''
      }
      res += params.seriesName + '<br />' + params.name + ': ' + Math.round(params.value) + '所' + '(' + params.percent + '%)'
      return res
    }
  },
  legend: {
    top: '15%',
    right: '0%',
    width: '200',
    data: ['学前', '小学', '初中', '普高', '中职', '特殊教育'],
    textStyle: {
      color: '#bad3ff',
      fontSize: 18
    },
    itemHeight: 6,
    itemWidth: 20
  },
  series: []
}

const staticOptionMid = {
  legend: {
    top: '2%',
    data: ['幼儿园', '小学', '初中', '高中', '中专'],
    textStyle: {
      color: '#bad3ff',
      fontSize: 22
    },
    itemHeight: 6,
    itemWidth: 20
  },
  series: []
}

const staticOptionSmall = {
  legend: {
    top: '2%',
    data: ['幼儿园', '小学', '初中', '高中', '中专'],
    textStyle: {
      color: '#bad3ff',
      fontSize: 22
    },
    itemHeight: 6,
    itemWidth: 20
  },
  series: []
}

// 备选颜色，有需求则进行循环

const colors = ['#ffea7f', '#00e2fe', '#1890ff', '#6439d2', '#fa6bb3', '#ffb686', '#7574ee']

const circleCenter = [
  ['5%', '35%'], ['15%', '35%'], ['25%', '35%'], ['35%', '35%'],
  ['45%', '35%'], ['55%', '35%'], ['65%', '35%'], ['75%', '35%'], ['85%', '35%']
]

const circleRadius = [
  ['42%', '50%'], ['42%', '50%'], ['42%', '50%'], ['42%', '50%'],
  ['42%', '50%'], ['42%', '50%'], ['42%', '50%'], ['42%', '50%'], ['42%', '50%']
]

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions, id, myChart) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    if (screen === 1024) {
      this.option = staticOptionSmall
    }
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    // // 装配数据 必须使用箭头函数
    additionalOptions.data.forEach((d1, d2) => {
      this.option.series.push({
        name: d1.name,
        type: 'pie',
        startAngle: -90,
        radius: circleRadius[d2],
        center: circleCenter[d2],
        legendHoverLink: false,
        avoidLabelOverlap: false,
        hoverAnimation: false,
        label: {
          show: false
        },
        labelLine: {
          show: false,
          length: 30,
          length2: 0
        },
        data: []
      })
      let total = 0
      this.option.series[d2].data.push({
        value: 0,
        itemStyle: {
          opacity: 0
        },
        label: {
          show: true,
          position: 'outside',
          padding: [0, 0, 0, -35],
          textStyle: {
            fontSize: '20',
            color: '#bad3ff'
          },
          formatter: () => {
            return d1.name
          }
        }
      })
      d1.data.forEach((p1, p2) => {
        this.option.series[d2].data.push({
          name: additionalOptions.name[p2],
          value: p1,
          itemStyle: {
            color: colors[p2]
          }
        })
        total += p1
      })
      this.option.series[d2].data.push({
        value: 0,
        itemStyle: {
          opacity: 0
        },
        label: {
          show: true,
          position: 'center',
          textStyle: {
            fontSize: '30',
            fontFamily: 'customer',
            color: '#fff'
          },
          formatter: (params) => {
            return Math.round(total)
          }
        }
      })
    })

    myChart.on('legendselectchanged', function (params) {
      let selected = params.selected
      let status = false
      for (let key in selected) {
        if (selected[key]) {
          status = selected[key]
        }
      }
      if (!status) {
        selected['幼儿园'] = true
        myChart.setOption({ legend: { selected } })
      }
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.series = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
